<template>
  <div class="py-24 pr-24 bd-filt-6 bgc-lightgrey">
    <div class="pl-24 mb-24">
      <el-radio-group v-model="activeIndex" class="mb-24">
        <el-radio-button :label="0">图片一</el-radio-button>
        <el-radio-button :label="1">图片二</el-radio-button>
      </el-radio-group>
      <div class="mb-24 py-24 pr-24 bd-filt bgc-white">
        <el-form-item
          ref="picture"
          label-width="100px"
          label="图片"
          class="mb-24"
          :rules="{ ...notEmptyRules, message: '请上传图片' }"
          :prop="`componentData.${index}.config.imgList[${activeIndex}].imgSrc`"
        >
          <PictureMaterialSelector
            :img-url.sync="activeImg.imgSrc"
            @success="() => $refs.picture.clearValidate()"
          ></PictureMaterialSelector>
        </el-form-item>
        <el-form-item label-width="100px" label="拉伸方式" class="mb-24">
          <el-radio-group v-model="activeImg.objectFit">
            <el-radio label="contain">等比适应</el-radio>
            <el-radio label="cover">纵向平铺</el-radio>
          </el-radio-group>
        </el-form-item>
        <JumpSetting v-model="activeImg" label-width="100px" />
      </div>
    </div>
    <el-form-item label="位置尺寸" class="mb-24">
      <LayoutSetting v-model="model" />
    </el-form-item>
    <BorderSetting v-model="model" class="mb-24" />
    <el-form-item label="不透明度">
      <OpacitySetting v-model="style" />
    </el-form-item>
  </div>
</template>

<script>
  import { notEmptyRules } from '@/utils';
  import PictureMaterialSelector from '@/components/PictureMaterialSelector';
  import LayoutSetting from '@/views/productEdit/components/settingComponent/LayoutSetting';
  import JumpSetting from '@/views/productEdit/components/settingComponent/JumpSetting';
  import BorderSetting from '@/views/productEdit/components/settingComponent/BorderSetting';
  import OpacitySetting from '@/views/productEdit/components/settingComponent/OpacitySetting';

  export default {
    components: { PictureMaterialSelector, LayoutSetting, JumpSetting, BorderSetting, OpacitySetting },

    model: { prop: 'model' },

    props: {
      model: {
        type: Object,
        default: () => ({})
      },
      index: {
        type: [Number, String],
        default: undefined
      }
    },

    data() {
      return {
        notEmptyRules,
        activeIndex: 0
      };
    },

    computed: {
      config() {
        return this.model.config;
      },
      style() {
        return this.model.style;
      },
      origin() {
        return this.model.origin;
      },
      activeImg() {
        return this.config.imgList[this.activeIndex];
      }
    }
  };
</script>
